<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店详情</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <!-- 引入 Vue.js -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <!-- 引入 Bootstrap 图标 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入 Element UI CSS -->
    <script src="js/axios.min.js"></script> <!-- 引入 Axios 用于 AJAX 请求 -->
    <style>
        [v-cloak] {
            display: none; /* v-cloak 指令使得加载完成前不显示内容 */
        }

        body {
            background-color: #f7f9fc; /* 设置页面背景颜色 */
        }

        .hotel-detail {
            background: white; /* 酒店详情背景 */
            padding: 14px; /* 内边距 */
            border-radius: 5px; /* 边角圆润 */
            max-width: 100%; /* 最大宽度 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
        }

        .hotel-description img {
            max-width: 100%; /* 图片最大宽度 */
            height: auto; /* 自适应高度 */
            border-radius: 5px; /* 图片边角圆润 */
            margin-bottom: 20px; /* 图片底部间距 */
        }

        .room-card {
            border: 1px solid #dcdfe6; /* 房间卡片边框 */
            border-radius: 5px; /* 卡片圆角 */
            padding: 10px; /* 内边距 */
            margin: 5px 0; /* 垂直间距 */
            background-color: #f9f9f9; /* 背景色 */
            display: flex; /* 使用 flexbox 布局 */
            align-items: center; /* 垂直居中对齐 */
            transition: transform 0.2s; /* 鼠标悬停时的过渡效果 */
        }

        .room-card:hover {
            transform: scale(1.02); /* 鼠标悬停时放大效果 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影效果 */
        }

        .room-card img {
            max-width: 80px; /* 房间图片大小 */
            border-radius: 5px; /* 圆角 */
            margin-right: 10px; /* 右侧间距 */
        }

        .navbar-custom {
            background-color: #009688; /* 自定义导航条颜色 */
        }

        .facility-tag {
            margin-right: 5px; /* 设施标签间隔 */
        }

        .facility-icon {
            margin-right: 5px; /* 设施图标间隔 */
        }

        .comment-section {
            margin-top: 20px; /* 评论区与其他部分的距离 */
        }

        .comment {
            border-bottom: 1px solid #dcdfe6; /* 评论分隔线 */
            padding: 10px 0; /* 上下内边距 */
            display: flex; /* 使用 flexbox 布局 */
            align-items: center; /* 垂直居中对齐 */
        }

        .comment img {
            width: 40px; /* 用户头像大小 */
            height: 40px; /* 用户头像大小 */
            border-radius: 50%; /* 用户头像圆形 */
            margin-right: 10px; /* 右侧间距 */
        }

        .stars {
            color: gold; /* 星星颜色 */
        }
    </style>
</head>

<body>

<!-- 导航条 -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom mb-4">
    <a class="navbar-brand" href="index.html">酒店展示</a> <!-- 网站标题 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span> <!-- 导航器切换图标 -->
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html"><i class="bi bi-house"></i> 首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="bi bi-star"></i> 酒店收藏</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="bi bi-file-earmark-text"></i> 我的订单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="bi bi-person-circle"></i> 个人中心</a>
            </li>
        </ul>
    </div>
</nav>

<!-- 酒店详情部分 -->
<div id="app" v-cloak class="container hotel-detail">
    <el-skeleton :loading="loading" :rows="15" animated/> <!-- 加载状态骨架屏 -->
    <div class="row">
        <div class="col-md-6 hotel-description">
            <img style="width: 100%;" :src="hotel.img" alt="酒店图片"> <!-- 酒店图片 -->
            <h1>{{ hotel.name }}</h1> <!-- 酒店名称 -->
            <p>{{ hotel.jianjie }}</p> <!-- 酒店简介 -->
            <h2>酒店设施</h2>
            <ul>
                <li v-for="facility in hotel.facilities" :key="facility">
                    <span class="facility-tag badge" :class="getFacilityClass(facility)">
                        <i class="facility-icon bi bi-check-circle"></i> {{ facility }}
                    </span>
                </li>
            </ul>
            <!-- 展开评论区按钮 -->
            <button class="btn btn-link" @click="toggleComments">
                <i class="bi" :class="showComments ? 'bi-chevron-up' : 'bi-chevron-down'"></i> 展开评论区
            </button>

            <div v-if="showComments" class="comment-section">
                <h3>评论</h3>
                <div v-for="comment in comments" :key="comment.id" class="comment">
                    <img :src="comment.img" alt="用户头像">
                    <div>
                        <strong>{{ comment.user }}</strong> <!-- 评论用户名称 -->
                        <span class="stars">{{ '★'.repeat(comment.starnum) }}</span> <!-- 评分 -->
                        <p>{{ comment.text }}</p> <!-- 评论内容 -->
                        <small class="text-muted">{{ formatDate_liuyanTime(comment.time) }}</small> <!-- 评论时间 -->
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 room-selection">
            <h2>可选房间</h2>

            <!-- 可选房间列表 -->
            <div class="room-card" v-for="(room, index) in rooms" :key="index">
                <img :src="room.img" :alt="room.name"> <!-- 房间图片 -->
                <div>
                    <h5>{{ room.name }}</h5> <!-- 房间名称 -->
                    <p>剩余数量：<span class="text-success">{{ room.personnum }}</span></p> <!-- 剩余数量 -->
                    <p>单价：<span class="text-danger">¥{{ room.price }}</span> / 晚</p> <!-- 房间单价 -->
                </div>
                <!-- 选择房间按钮 -->
                <button class="btn btn-primary" @click="selectRoom(room)">
                    <i class="bi bi-check-circle"></i> 选择房间
                </button>
            </div>

            <h2>预约信息</h2>
            <div v-if="selectedRoom">
                <p>您选择的房间：{{ selectedRoom.name }}</p>
                <p>单价：¥{{ selectedRoom.price }} / 晚</p>

                <!-- 预约表单 -->
                <form @submit.prevent="submitReservation">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" v-model="reservationData.name" id="name" required class="form-control"
                               placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="text" v-model="reservationData.phone" id="phone" required class="form-control"
                               placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="checkInDate">入住日期</label>
                        <!-- 入住日期输入框，限制选择当前与未来日期 -->
                        <input type="date" v-model="reservationData.checkInDate" id="checkInDate" required
                               class="form-control" @change="calculatePrice" :min="getTodayDate">
                    </div>
                    <div class="form-group">
                        <label for="checkOutDate">退房日期</label>
                        <!-- 退房日期输入框，限制选择的日期不早于入住日期 -->
                        <input type="date" v-model="reservationData.checkOutDate" id="checkOutDate" required
                               class="form-control" @change="calculatePrice" :min="reservationData.checkInDate">
                    </div>
                </form>

                <p v-if="totalNights > 0">住房天数：{{ totalNights }} 晚</p> <!-- 住房天数 -->
                <p v-if="totalPrice > 0">总价：¥{{ totalPrice }}</p> <!-- 总价 -->

                <!-- 确认预约按钮 -->
                <button type="button" class="btn btn-success" @click="submitReservation"
                        :disabled="!isValidReservation">
                    <i class="bi bi-check-circle"></i> 确认预约
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <!-- 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <!-- 引入 Popper.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <!-- 引入 Bootstrap JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- 引入 Element UI -->
<script src="js/data.js"></script> <!-- 自定义数据脚本 -->
<script src="js/publicfunction.js"></script> <!-- 自定义公共函数脚本 -->
<script>
    new Vue({
        el: '#app', // Vue 实例挂载的 DOM 元素
        data() {
            return {
                hotelid: '', // 酒店 ID
                loading: true, // 加载状态
                hotel: {}, // 酒店数据
                rooms: [], // 房间数据
                selectedRoom: null, // 当前选择的房间
                totalNights: 0, // 住房天数
                totalPrice: 0, // 总价
                reservationData: { // 预约数据
                    name: '', // 姓名
                    phone: '', // 电话
                    checkInDate: '', // 入住日期
                    checkOutDate: '', // 退房日期
                },
                showComments: false, // 是否显示评论区
                comments: [], // 评论数据
            };
        },
        computed: {
            // 验证预约信息是否有效
            isValidReservation() {
                return this.totalNights > 0 && this.reservationData.name && this.reservationData.phone;
            },
            // 返回今天的日期，以 YYYY-MM-DD 格式
            getTodayDate() {
                const today = new Date(); // 获取当前日期
                const year = today.getFullYear(); // 获取年份
                const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份，补零
                const day = String(today.getDate()).padStart(2, '0'); // 获取日期，补零
                return `${year}-${month}-${day}`; // 返回格式化的日期字符串
            }
        },
        created() {
            // 获取酒店 ID 参数并请求酒店数据
            const params = getRouterParams(); // 假设这是一个提取 URL 参数的函数
            this.hotelid = params.get('id'); // 从 URL 参数中获取酒店 ID
            axios.get(`${urlluodeng}/hotel/gethotelbyid?id=${this.hotelid}`) // 发起请求获取酒店数据
                .then(res => {
                    if (res.data.result) {
                        this.hotel = res.data.data; // 设置酒店数据
                        let facilities = []; // 初始化设施数组
                        if (this.hotel.iswifi === 1) facilities.push('免费Wi-Fi'); // 如果有 Wi-Fi
                        if (this.hotel.ishotwater === 1) facilities.push('游泳池'); // 如果有游泳池
                        this.hotel.facilities = facilities; // 设置酒店设施
                        this.getCouldeRoomS(); // 获取可用房间
                        this.getLiuyanData(); // 获取留言数据
                        setTimeout(() => {
                            this.loading = false;
                        }, 1000); // 模拟加载完成
                    } else {
                        this.$message.error('不好意思，后台出错'); // 错误处理
                        setTimeout(() => {
                            window.location.href = 'index.html';
                        }, 1000); // 跳转到首页
                    }
                }).catch(err => {
                console.error(err); // 输出错误信息
                this.$message.error('获取酒店信息失败，网络连接错误'); // 捕获网络错误
            });
        },
        methods: {
            // 获取可用房间信息
            async getCouldeRoomS() {
                try {
                    const res = await axios.get(`${urlluodeng}/room/getRoomById?id=${this.hotelid}`);
                    if (res.data.result) {
                        this.rooms = res.data.data; // 成功响应后设置房间数据
                    } else {
                        this.$message.error('抱歉，后台出错'); // 错误处理
                    }
                } catch (err) {
                    console.log(err); // 输出错误
                    this.$message.error('获取房间信息失败，网络连接错误'); // 捕获网络错误
                }
            },
            // 获取酒店留言数据
            async getLiuyanData() {
                try {
                    const res = await axios.get(`${urlluodeng}/liuyan/getLiuyansByHotelId?hotelId=${this.hotelid}`);
                    this.comments = res.data.data; // 成功响应后设置评论数据
                } catch (err) {
                    console.log(err); // 输出错误
                    this.$message.error('获取留言信息失败，网络连接错误'); // 捕获网络错误
                }
            },
            // 选择房间
            selectRoom(room) {
                this.$confirm(`您选择了 ${room.name}。确认选择吗？`)
                    .then(() => {
                        this.selectedRoom = room; // 设置当前选择的房间
                    })
                    .catch(() => {
                        this.$message.info('取消选择'); // 取消选择提示
                    });
            },
            // 提交预约
            submitReservation() {
                const {name, phone, checkInDate, checkOutDate} = this.reservationData; // 解构出预约信息
                console.log('预约信息：', {name, phone, checkInDate, checkOutDate, room: this.selectedRoom.name});
                alert('预约成功！'); // 提示预约成功
                // 清空预约数据
                this.reservationData = {name: '', phone: '', checkInDate: '', checkOutDate: ''};
                this.selectedRoom = null; // 清空选择的房间
                this.totalNights = 0; // 重置住房天数
                this.totalPrice = 0; // 重置总价
            },
            // 格式化留言时间
            formatDate_liuyanTime(isoString) {
                const date = new Date(isoString); // 创建日期对象
                const year = date.getFullYear(); // 获取年份
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，补零
                const day = String(date.getDate()).padStart(2, '0'); // 获取日期，补零
                const hours = String(date.getHours()).padStart(2, '0'); // 获取小时，补零
                const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟，补零
                return `${year}-${month}-${day} ${hours}:${minutes}`; // 返回格式化后的日期字符串
            },
            // 根据设施名称返回对应的 CSS 类
            getFacilityClass(facility) {
                switch (facility) {
                    case '免费Wi-Fi':
                        return 'bg-success text-white'; // Wi-Fi 设施样式
                    case '游泳池':
                        return 'bg-info text-white'; // 游泳池 设施样式
                    case '健身房':
                        return 'bg-warning text-dark'; // 健身房 设施样式
                    case '餐厅':
                        return 'bg-danger text-white'; // 餐厅 设施样式
                    case '24小时客房服务':
                        return 'bg-primary text-white'; // 客房服务 设施样式
                    default:
                        return ''; // 默认样式
                }
            },
            // 切换评论区显示状态
            toggleComments() {
                this.showComments = !this.showComments; // 切换布尔值控制评论区显示
            },
            // 计算住房天数和总价
            calculatePrice() {
                const checkInDate = new Date(this.reservationData.checkInDate); // 入住日期对象
                const checkOutDate = new Date(this.reservationData.checkOutDate); // 退房日期对象
                if (checkInDate && checkOutDate) {
                    this.totalNights = Math.max((checkOutDate - checkInDate) / (1000 * 60 * 60 * 24), 0); // 计算住宿天数，确保不为负
                    this.totalPrice = this.totalNights * (this.selectedRoom ? this.selectedRoom.price : 0); // 计算总价
                } else {
                    this.totalNights = 0; // 重置天数
                    this.totalPrice = 0; // 重置总价
                }
            }
        }
    });
</script>

</body>
</html>
